import React , {memo,useEffect,createRef,useState,useCallback} from 'react' //useRef
import { Carousel } from 'antd';
import { useDispatch,useSelector,shallowEqual } from "react-redux";
import recommend from "store/action/recommend.js";

import "./index.scss";

function WYTopBanner(props) {
    // 本地数据 
    const carouselRef = createRef()
    // const bgRef = useRef(null)
    const [currentIdx,changeCurrentIdx] = useState(0)
    
    // redux数据 
    const dispatch = useDispatch();
    const topBanners =useSelector(state=>(state.getIn(['recommend','topBanners'])),shallowEqual)
    
    // hooks逻辑
    
    useEffect(() => {
        dispatch(recommend.getTopBanner())
    }, [dispatch])    

    const  getCarouseIdx =useCallback((from,to)=>{
        changeCurrentIdx(from)
    },[])
    // 其它逻辑 
    const currentImage = topBanners.length>0 && topBanners[currentIdx].imageUrl +'?imageView&blur=40x20'
    // bgRef.current&&(bgRef.current.style.background = `url("${currentImage}")`)
    return (
        //  ref={bgRef}
    <div className='topBanner' style={{backgroundImage:"url("+currentImage+")"}}>
        {/* 中间 */}
        <div className='banner wrap-v2' >
            {/* 走马灯 */}
            <Carousel effect="fade" className='carousel' autoplay 
            ref={carouselRef} afterChange={getCarouseIdx}>
                {topBanners.map(item=>(
                    <div className='carousel-item' key={item.imageUrl}>
                    <img className='image' src={item.imageUrl} alt={item.typeTitle}></img>
                    </div>
                ))}
                </Carousel>
            {/* 下载客户端banner */}
            <a href='https://music.163.com/#/download'  rel="noreferrer"  className='down-banner' target="_blank">
            </a>

        {/* 下一张 */}
        <div className='btn btn-l' onClick={e=>carouselRef.current.prev()}></div>
        {/* 上一张 */}
        <div className='btn btn-r'  onClick={e=>carouselRef.current.next()}>
        </div>
        </div>
    </div>
    )
}
export default memo(WYTopBanner)